import React, { useState } from "react";
import { InputItem, Button, Toast } from "antd-mobile";
import { REGister } from "../../http/api";
import Header from "../../components/Header";

export default function Register(props) {
    const [user, setUser] = useState({
        phone: "",
        password: "",
        nickname: ""
    })
    //点击注册实现注册逻辑
    const toregister = () => {
        REGister(user).then(res => {
            if (res.data.code === 200) {
                Toast.info(res.data.msg);
                props.history.push("/login")
            }
        })
    }
    return (
        <div>
            <Header title="注册" back></Header>
            {/* {JSON.stringify({ user })} */}
            {/* 获取input的值给user */}
            <InputItem
                clear
                placeholder="请输入手机号"
                onChange={(val) => setUser({ ...user, phone: val })}
            >
                手机号
            </InputItem>
            <InputItem
                clear
                placeholder="用户昵称"
                onChange={(val) => setUser({ ...user, nickname: val })}
            >
                昵称
            </InputItem>
            <InputItem
                clear
                placeholder="用户密码"
                onChange={(val) => setUser({ ...user, password: val })}
            >
                密码
            </InputItem>
            <div style={{ width: "33.33%", margin: "10px auto" }}>
                <Button type="primary" onClick={() => toregister()}>注册</Button>
            </div>
        </div >
    );
}
